<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="selsChange" >
            <el-table-column type="selection" width="40" v-if="selection" align="center">
            </el-table-column>
            <template v-for="(item, index) in tableCols">
                <el-table-column v-if="item.coltype" :key="index" :prop="item.prop" :label="item.lable" :width="item.width" align="center"> 
                    <template slot-scope="{row}">
                        <slot :name="item.slotname" :row="row" ></slot>
                    </template>
                </el-table-column>
                <el-table-column v-else :key="index+0" :prop="item.prop" :label="item.lable" :width="item.width"
                    align="center">
                </el-table-column>
            </template>
        </el-table>
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                :current-page="query.page" :page-sizes="[5, 10, 20, 30]" :page-size="1"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    namespace: 'table',
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        tableCols: {
            type: Array,
            default: () => []
        },
        selection: {
            type: Boolean,
            default: false
        },
        total: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            query: {
                page: 1,
                psize: 5
            },
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.query.psize = val
            this.$emit("pagechange", this.query)
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.query.page = val
            this.$emit("pagechange", this.query)
        },
        // id
        selsChange(val) {
            let res = val.map(item => item.id)
            // console.log(res);
            console.log(val);
            this.$emit('selsChange', res)
        }
    },


}
</script>
<style lang="less" scoped>
.block {
    margin-top: 20px;
    text-align: center;
}

</style>